<template>
  <div class="add_match">
    <el-form class="form" :model="addForm" :rules="rules" ref="addForm" label-width="20%">
      <el-form-item label="主办方" prop="web" style="clear:both">
          <el-select v-model="addForm.web" placeholder="请选择直播源" class="inline" clearable filterable>
            <el-option v-for="item in addForm.webs" :key="item.key" :label="item.value" :value="item.key">
            </el-option>
          </el-select>
        </el-form-item>
      <el-form-item class="form_item" label="直播地址" prop="url">
        <el-input v-model="addForm.url" :placeholder="$t('tips.ENTER.URL')" type="textarea" :rows="3" clearable></el-input>
      </el-form-item>
    </el-form>
    <div class="footer">
      <el-button class="cancel_button" @click="cancel">{{$t("common.CANCEL")}}</el-button>
      <el-button class="confirm_button" @click="addSubmit()">{{$t("common.CONFIRM2")}}</el-button>
    </div>
  </div>
</template>

<script>
import i18n from "@/lang";
import matchService from "@/service/matchService";

export default {
  name: "AddMatch",
  props: ['detailData'],
  data() {
    return {
      addForm: {},
      rules: {
        web: [{ required: true, message: "直播源不能为空" }],
        url: [{ required: true, message: "直播地址不能为空" }]
      },
    };
  },
  created() {
    this.addForm = JSON.parse(this.detailData)
    // console.log(this.addForm)
    // this.addForm.web = "dps"
  },
  methods: {
    addSubmit() {
        this.$refs.addForm.validate((valid) => {
            if (valid) {
                let params = {
                  web: this.addForm.web,
                  url: this.addForm.url
                }
                matchService.addMatch(params).then(res => {
                    if (res && res.data.result === 0) {
                        this.$message.success('新增成功!');
                        this.$emit('closeVisible', 'add')
                    }
                })
            }
        })
    },
    cancel() {
        this.$emit('closeVisible', 'cancel')
    },
  },
};
</script>

<style>
.inline {
  display: inline;
}

.add_match .footer {
  display: flex;
  justify-content: flex-end;
}
.add_match .form .form_item{
    margin-bottom: 30px;
}
</style>